<script setup lang="ts">
const lunch=['烤肉','火锅','烤鸭','烤鱼','炒菜','烤鸡','烤羊','']
const person={
  name:'张三',
  age:18,
  sex:'男'
}
</script>

<template>
  <div>
    <div v-for="item in lunch" :key="item">{{item}}</div>
  </div>
<div>
  <ul>
    <li v-for="item in lunch" :key="item">{{ item }}</li>
  </ul>
  <ol>
    <li v-for="item in lunch" :key="item">{{ item }}</li>
  </ol>
</div>
<!-- 
  遍历对象:
  value:对象中的值
  key:对象中的键
  index:遍历索引从0开始
-->
<ul>
  <li v-for="(value, key, index) in person" :key="index">
    {{ key }} : {{ value }}
  </li>
</ul>

<!-- 
  遍历数字:
  item从1开始 可以用来快速生成结构
-->
<p v-for="item in 10" :key="item">{{ item }}</p>
</template>

<style scoped>
div{
  background-color: rgb(0, 0, 0);
}
</style>
